// 实现使用函数调用xtx-message组件的逻辑
// 这个函数将来：导入直接使用，也可以挂载在vue实例原型上
// import Message from ’message.js‘ 使用Message({type：'error', text： '提示文字'})
// this.$message({type: 'error', text: '提示文字'})
import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

// 准备DOM容器(在外部创建，以免每次调用函数时被创建一次)
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
// 定时器标识
let timer = null
export default ({ type, text }) => {
  // 实现：根据xtx-message.vue渲染消息提示
  // 导入组件
  // 根据组件创建虚拟节点
  const vnode = createVNode(XtxMessage, { type, text })
  // 准备一个dom容器
  // 把虚拟节点渲染到dom容器中
  render(vnode, div)
  // 开启定时器，3秒后将其移出dom容器内容
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}
